<template>
  <h1>shallowRef的使用</h1>
  <h1 v-text="info1.a.b.c"></h1>
  <button @click="add1">自增</button>
  <hr />
  <h1 v-text="info2.a.b.c"></h1>
  <button @click="add2">自增</button>
</template>

<script setup>
// shallowRef: 对复杂层级的对象，只将其第一层变成 ref 响应。 (性能优化)
import { shallowRef, ref, triggerRef } from "vue";

// ref是定义基本数据数据的响应式，也可以定义引用类型的数据
// reactive是定义引用数据类型的响应式
let info1 = ref({ a: { b: { c: 3 } } });
console.log(info1.value.a.b.c);

let add1 = () => {
  info1.value.a.b.c++;
};

// ---------------------------

// shallowRef 表示最外层是响应式的，里面的a,b,c都不是响应式的
// 最外层：{ a: { b: { c: 3 } } }  整体变了，才会响应式
let info2 = shallowRef({ a: { b: { c: 3 } } });
console.log(info1.value.a.b.c);

let add2 = () => {
  // info2.value = { a: { b: { c: 100000 } } };
  // info2.value.a = { b: { c: 10000 } };
  // info2.value.a.b = { c: 10000 };
  info2.value.a.b.c++;

  // 强制刷新页面
  triggerRef(info2);
};
</script>

<style lang="scss" scoped>
</style>